<template>
  <div class="collect">
    <div class="collect-header">
      <div class="collect-title">
        <i class="el-icon-star-off" style="#f5f5f5;"></i>
        我的收藏
      </div>
    </div>
    <div class="content">
      <div class="goods-list" v-if="collectList.length > 0">
        <MyList :list="collectList" :isDelete="true">
          <el-container class="container">
            <!-- 商品推荐 -->
            <el-row class="form2">
              <el-col
                :class="index"
                v-for="(goods, index) in collectList"
                :key="index"
              >
                <a href="/particulars" id="one">
                  <img :src="goods.url" alt="" />
                  <h2 class="name">{{ goods.name }}</h2>
                  <h3 class="describe">{{ goods.describe }}</h3>
                  <p class="money">
                    <el-link type="warning">{{ goods.money }}</el-link>
                  </p>
                </a>
              </el-col>
            </el-row>
          </el-container>
        </MyList>
      </div>
      <div v-else class="collect-empty">
        <div class="empty">
          <h3>您没有收藏东西！！！</h3>
          <p>快去看看有什么值得收藏的东西吧^_^</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collectList: [
        {
          url: 'http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png',
          name: 'Redmi K30',
          describe: '120hz流速屏，全速热爱',
          money: '1599',
        },
        {
          url: 'http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png',
          name: 'Redmi K30',
          describe: '120hz流速屏，全速热爱',
          money: '1599',
        },
      ],
    }
  },
}
</script>

<style>
.el-col {
  width: 220px !important;
  height: 320px;
  margin-left: 13px;
  margin-top: 10px;
}
.form2 {
  margin-top: 20px;
  padding-left: 10px;
}
.form2 img {
  width: 210px !important;
  border: none !important;
}
.form2 :hover {
  border: 0.9px solid #868484;
}
.container {
  display: block;
}
#one,
#one * {
  border: none;
}
.name {
  font-size: 16px;
  border: none !important;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: none !important;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  border: none !important;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
  border: none !important;
}
.money a {
  border: none !important;
}
.money .el-link {
  font-size: 20px;
}
.money a :hover {
  border: none !important;
}
.collect {
  background-color: rgba(194, 218, 200, 0.199);
}
.collect-header {
  height: 40px;
  background-color: #fff;
  color: rgb(207, 124, 124);
  font-size: 25px;
  border-bottom: 1px solid rgb(207, 124, 124);
}
.collect-header i {
  margin-left: 20px;
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}
.collect .collect-empty .empty {
  height: 300px;
  text-align: center;
  margin: 65px 0 0;
  background: no-repeat 124px 0;
  color: #03101b59;
  overflow: hidden;
}
.collect .collect-empty .empty h3 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
